<template>
  <div class="designer-tools">
    <el-image
      class="tools-item"
      :src="nodeIcon"
      title="添加节点"
      @dragstart="dragstart($event)"
      @dragend="dragend($event)"
    />
    <el-image
      class="tools-item"
      :src="removeIcon"
      title="删除元素"
      @click="$emit('menu-remove')"
    />
    <el-button @click="save">下载</el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import nodeIcon from '@/assets/imgs/icon/node.svg'
import removeIcon from '@/assets/imgs/icon/remove.svg'

import { exportRaw } from '@/utils/fileUtil'

export default defineComponent({
  name: 'DesignerTools',
  props: {},
  emits: ['menu-node', 'menu-remove', 'menu-dowlond'],
  setup(props, context) {
    // 节点拖拽前
    const dragstart = (event) => {
      event.currentTarget.cloneNode(true)
    }
    // 节点拖拽后
    const dragend = (event) => {
      context.emit('menu-node', { x: event.x, y: event.y })
    }

    // 导出拓扑数据
    const save = () => {
      context.emit('menu-dowlond', (data) => {
        exportRaw('graph.json', JSON.stringify(data, null, 2))
      })
    }
    return {
      dragstart,
      dragend,
      save,
    }
  },
  data() {
    return {
      nodeIcon,
      removeIcon,
    }
  },
  mounted() {
    // console.log('BASE_URL', process.env.BASE_URL)
  },
})
</script>

<style lang="scss" scoped>
.designer-tools {
  display: flex;
  align-items: center;
  height: 60px;
  .tools-item {
    width: 40px;
    height: 40px;
    cursor: pointer;
  }
}
</style>
